@CHARSET "UTF-8";
.cafe-warning-container{
	position: absolute;
	height: 70px;
	z-index: 99999;
}

.cafe-warning-container .cafe-warning-ele-list{
	width: calc(100% - 90px);
	height: 60px;
	position: absolute;
	top: 10px;
	left: 0px;
}

.cafe-warning-container .cafe-warning-ele-list .cafe-warning-ele-item{
	width: 50px;
	height: 60px;
	position: absolute;
	cursor: pointer;
}

.cafe-warning-container .cafe-warning-ele-list .cafe-warning-ele-item .cafe-warning-ele-item-icon{
	width: 50px;
	height: 30px;
	background: center center no-repeat;
}

.cafe-warning-container .cafe-warning-ele-list .cafe-warning-ele-item .cafe-warning-ele-item-title{
	width: 50px;
	height: 30px;
	line-height: 15px;
	font-size: 12px;
	color: #000;
	text-align: center;
    margin-top: 5px;	
}

.cafe-warning-container .cafe-warning-ele-total-container{
	width: 50px;
	height: 60px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.cafe-warning-container .cafe-warning-ele-total-container .cafe-warning-ele-icon{
	width: 50px;
	height: 30px;
	background: url("images/objectivewarning/warning-total.png") center center no-repeat;
}

.cafe-warning-container .cafe-warning-ele-total-container .cafe-warning-ele-title{
	width: 50px;
	height: 30px;
	line-height: 15px;
	font-size: 12px;
	color: #000;
	text-align: center;
    padding: 0 2px;
    margin-top: 5px;
}

.cafe-warning-container .cafe-warning-ele-total-container .cafe-warning-ele-total{
    width: 17px;
    height: 17px;
    line-height: 17px;
    position: absolute;
    top: -5px;
    right: 1px;
	background-color: red;
	color: #fff;
	border-radius: 50%;
	font-style: normal;
	text-align: center;
	font-size: 12px;
	display: none;
}

.cafe-warning-container .cafe-warning-icon-falldown{
	 -webkit-animation: iconFallDown 0.5s ease-in;
	 animation: iconFallDown 0.5s ease-in;
}

.cafe-warning-container .cafe-warning-icon-jump{
	 -webkit-animation: warningIconJump 1s ease-in-out;
	 animation: warningIconJump 1s ease-in-out;
}

@-webkit-keyframes iconFallDown{
  0%{
    filter: drop-shadow(0 0 9px #333);
  }
  10%{
   	filter: drop-shadow(0 0 18px #2daebf);
  }
  20%{
  filter: drop-shadow(0 0 18px #a9014b);
  }
  30%{
   filter: drop-shadow(0 0 18px #91bd09);
  }
  40%{
   filter: drop-shadow(0 0 9px #333);
  }
  50%{
  filter: drop-shadow(0 0 18px #2daebf);
  }
  60%{
  filter: drop-shadow(0 0 18px #a9014b);
  }
  70%{
   filter: drop-shadow(0 0 18px #91bd09);
  }
  80%{
  filter: drop-shadow(0 0 18px #91bd09);
  }
  90%{
   filter: drop-shadow(0 0 9px #333);
  }
  100%{
  filter: drop-shadow(0 0 18px #2daebf);
  	 top: 0px;
  }
}

@-webkit-keyframes warningIconJump{
  0%{
   top: 0px;
    -webkit-transform:translateY(30px);
    filter: drop-shadow(0 0 9px #333);
  }
  12%{
    -webkit-transform:translateY(-30px);
  }
  24%{
    -webkit-transform:translateY(30px);
  }
  36%{
    -webkit-transform:translateY(-30px);
    filter: drop-shadow(0 0 18px #2daebf);
  }
  48%{
    -webkit-transform:translateY(30px);
  }
  60%{
    -webkit-transform:translateY(-30px);
    filter: drop-shadow(0 0 18px #a9014b);
  }
  72%{
    -webkit-transform:translateY(30px);
  }
  84%{
    -webkit-transform:translateY(-30px);
  }
  100%{
    -webkit-transform:translateY(30px);
    filter: drop-shadow(0 0 18px #91bd09);
  }
}